<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xiaoyang</title>
    <link rel="stylesheet" href="http://codelover.club/stutasks/userID_260/currNo_7/个人主页/个人主页.css">
</head>


<body>
    <div class="header"> 
        <img  src="https://ts1.cn.mm.bing.net/th/id/R-C.36364df10bfdf5c44893baf6c17f5f2e?rik=%2bGDkZT938pw7Lw&riu=http%3a%2f%2fimg.woyaogexing.com%2f2017%2f02%2f24%2fbf1fa2becbd1415a!600x600.jpg&ehk=4UHdIg2KEkrpsEncvQDTYT4EyIrXoliNH5wvZncc7dc%3d&risl=&pid=ImgRaw&r=0" alt="" class="cass">
    <div class="top">
        <h1>小样的主页</h1>
    </div>
<!--完成149和217行利用id选择器：#music跳转的语句-->
    <div class="nav">
        <a href="#introduce">个人简介</a>
        
        <a href="#music">走过的路</a>
       <a href="#program">个人作品</a>
        <a href="#share">努力学习</a>
        <a href="#relax">小小荣誉</a>
    </div> 
</div>
<div class="mp4">
</div>
<div class="second">

</div>
</div>
    <div class="main">
        <!--个人相册-->
        <div class="left">
            <div class="imgset">
                <div id="photo">
                    <h2></h2>
                </div>
                <div class="dierbu">
                    <div class="box">
                        <div class="img-box">
                            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.488c1a7f1fa9aea959d3d6fffd6bc682?rik=I8zpYeUvu9DIvw&riu=http%3a%2f%2fwww.91danji.com%2fupload%2f201381%2f20130801101917033.jpg&ehk=TvwY5gajP6S3erUOXcxmIX4uDZ0uGWyDNsd9YZDkDbg%3d&risl=&pid=ImgRaw&r=0" width="800px" alt="">
                        </div>
                        <div class="img-box">
                            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.5df82eeb14e46c5e3d7d9878752ab979?rik=QR8lbRZIfnVd1g&riu=http%3a%2f%2fwx2.sinaimg.cn%2flarge%2f006prIg7gy1fr41snenbaj30rs0fmkic.jpg&ehk=MDa7Uvb39wQ7N6EvoUYOowaWIcbrapyc4WjZKhPe%2bPw%3d&risl=&pid=ImgRaw&r=0" alt="">
                        </div>
                        <div class="img-box">
                            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.4a3cbde01782bda8173ce3f0e2d730ce?rik=QL2TqmpxKNuscg&riu=http%3a%2f%2fi0.hdslb.com%2fbfs%2farchive%2f80b7b37667c96991141ece8dd737454703f8ba90.jpg&ehk=gKI0MXK0VpLoFIlCTamqWzptZRXKwrSAG5V90KGJv4s%3d&risl=&pid=ImgRaw&r=0" alt="">
                        </div>
                        <div class="img-box">
                            <img src="https://pic3.zhimg.com/v2-bc80c726540c500926070f63e2215463_r.jpg?source=1940ef5c" alt=""></div>
                        <div class="img-box">
                            <img src="https://img.zcool.cn/community/013d3858744c0fa801219c7753f477.jpg@1280w_1l_2o_100sh.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--个人简介-->
        <div class="right">
            <div class="bj">
                <div id="introduce">
                    <h2>个人简介</h2>
                </div>
                <p>Hello!
                   
                </p>
                <img class="sss" src="http://codelover.club/stutasks/userID_260/currNo_7/个人主页/头像.jpg">
                <p>姓名：杨坤钦</p>
                <p>民族：汉族</p>
                <p>花有重开之日，人间再无少年</p>
                
                <p>联系方式：18599284085(微信同步)</p>
                <p>邮箱：2254593763@qq.com</p>
                <p>兴趣：玩乐器，足球，羽毛球（又菜又爱玩）</p>
               
                
            </div>
        </div>
        <!--个人作品-->
        <div class="left">
            <div class="imgset">
                <div id="program">
                    <h2>个人作品</h2>
                </div >
                <div class="grid">
                <nav class="menus">
                    <ul class="buttom">
                        <li class="list">
                            html内容以及盒子
                                <ul>
                                    <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/3.html" target="_blank">表单</a></li>
                                    <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/1.html" target="_blank">成绩表</a></li>
                                    <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/盒子/盒子.html" target="_blank">盒子</a></li>
                                </ul>
                            </li>
                        <li class="list">
                            文本、颜色背景、奖状
                                <ul>
                                    <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/font.html" target="_blank">font属性</a></li>
                                    <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/天龙八部/天龙八部/Document.html" target="_blank">天龙八部</a></li>
                                    <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/6/6.html" target="_blank">百度快照</a></li>
                                    <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/背景/heji.html" target="_blank">颜色和背景</a></li>
                                    <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/奖状/奖状.html" target="_blank">奖状</a></li>
                                </ul>
                            </li>
                        <li class="list">
                            浮动应用、焦点悬停
                            <ul>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/鼠标悬停/键盘焦点和鼠标悬停效果设计.html" target="_blank">键盘焦点和鼠标悬停效果设计</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/探究浮动及定位/1.html" target="_blank">浮动排序</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/探究浮动及定位/2.1文字环绕.html" target="_blank">文字环绕</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/探究浮动及定位/2.2行环绕浮动.html" target="_blank">行环绕浮动</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/探究浮动及定位/2.4浮动清楚.html" target="_blank">浮动清楚</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/探究浮动及定位/2.5浮动应用居右居左.html" target="_blank">浮动应用居右居左</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/探究浮动及定位/新建文件夹/2.6探究浮动排列.html" target="_blank">研究浮动排列</a></li>
                            </ul>
                        </li>
                        <li class="list">
                            探究定位及其应用
                            <ul>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/探究定位及应用/1.1探究定位.html" target="_blank">探究定位</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/探究定位及应用/1.2效果的网页固定定位.html" target="_blank">网页固定</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/探究定位及应用/1.3菜单设计与制作.html" target="_blank">菜单设计与制作</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/探究定位及应用/1.2促销/效果.html" target="_blank">哈根达斯以及促销</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/探究定位及应用/1.5bilibili.html" target="_blank">哔哩哔哩</a></li>
                            </ul>
                        </li>
                        <li class="list">
                            实现京东购物车
                            <ul>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/京东购物车/购物车.html">京东购物车</a></li>
                            </ul>
                        </li>
                        <li class="list">
                            动感立方体
                            <ul>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/实现动感立方体/1.1 2D变换.html" target="_blank">2d</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/实现动感立方体/1.2 3D变换.html" target="_blank">3d</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/实现动感立方体/1.3CSS动画.html" target="_blank">动画</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/实现动感立方体/1.4l立方体.html" target="_blank">立方体</a></li>
                            </ul>
                        </li>
                        <li class="list">
                            多列flex、grid
                            <ul>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/1探究多例.html" target="_blank">多列文本</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/2flex布局.html" target="_blank">flex布局</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/grid布局.html" target="_blank">grid布局</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/骰子.html" target="_blank">骰子</a></li>
                                <li><a href="http://codelover.club/stutasks/userID_260/currNo_7/21/多列/布局实现/进一步实现.html" target="_blank">布局实现</a></li>
                            </ul>
                        </li>   
                        <li class="list">
                            美的官网的实现
                            <ul>
                                <li>
                                    <a href="http://codelover.club/stutasks/userID_260/currNo_7/美的官网/美的.html">点进</a>
                                </li>
                            </ul>
                        </li>     
                        
                    </ul>
                </nav>
                </div>
                <div class="grid1">
                    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.2cb889bc2f65bd6cae3cc286a52eb4ab?rik=NzqXX4bvkZl1EQ&riu=http%3a%2f%2fc-ssl.duitang.com%2fuploads%2fitem%2f201702%2f18%2f20170218214611_xamfN.jpeg&ehk=jnTRmetgpT0otACEgz6XX94X5TTcfbDPmFvGdLT%2b634%3d&risl=&pid=ImgRaw&r=0"  alt="">
                </div>
            </div>
           
                
              
            </div>
        </div>
        <!--音乐播放器-->
        <div class="right">
            <div class="bj">
                <!--完成149和217行利用id选择器：#music跳转的语句-->
                <div id="music">
                    
                  
                </div>
                <div id="music">
                    <h2>走过的路</h2>
                  <p>2006年在读小学</p>
                  <p>2012年在读初中</p>
                  <p>2015年在读高中</p>
                  <p>2018年入伍前往新疆</p>
                  <p>2020年12月26号结束了两年半军旅生涯</p>
                  <p>2021年9月复学到顺职院</p>
                  <p>以后更精彩</p>
            </div>
            <audio src="http://codelover.club/stutasks/userID_260/currNo_7/个人主页/无赖.mp3" controls="controls" loop="loop" ></audio>
                
            </div>
        </div>
        <!--编程知识分享-->
        <div class="left">
            <div class="bj">
                <div id="share">
                    <h2>杨某人正在努力开发中</h2>
                        <div class="index_word2">
                          <ul class="slides">
                            <input type="radio" id="control-1" name="control" checked>
                            <input type="radio" id="control-2" name="control">
                            <input type="radio" id="control-3" name="control">
                            <input type="radio" id="control-4" name="control">
                            <input type="radio" id="control-5" name="control">
                           
                            <!--  Left/Right Button  -->
                           
                            <div class="navigator slide-1">
                              <label for="control-5">
                                <i class="fas fa-chevron-left"></i>
                              </label>
                              <label for="control-4">
                                <i class="fas fa-chevron-right"></i>
                              </label>
                            </div>
                            <div class="navigator slide-1">
                              <label for="control-4">
                                <i class="fas fa-chevron-left"></i>
                              </label>
                              <label for="control-3">
                                <i class="fas fa-chevron-right"></i>
                              </label>
                            </div>
                            <div class="navigator slide-1">
                              <label for="control-3">
                                <i class="fas fa-chevron-left"></i>
                              </label>
                              <label for="control-2">
                                <i class="fas fa-chevron-right"></i>
                              </label>
                            </div>
                  
                            <div class="navigator slide-2">
                              <label for="control-1">
                                <i class="fas fa-chevron-left"></i>
                              </label>
                              <label for="control-3">
                                <i class="fas fa-chevron-right"></i>
                              </label>
                            </div>
                  
                            <div class="navigator slide-3">
                              <label for="control-2">
                                <i class="fas fa-chevron-left"></i>
                              </label>
                              <label for="control-1">
                                <i class="fas fa-chevron-right"></i>
                              </label>
                            </div>
                  
                  
                            <li class="slide"></li>
                            <li class="slide"></li>
                            <li class="slide"></li>
                            <li class="slide"></li>
                            <li class="slide"></li>
                         
                            <div class="controls-visible">
                              <label for="control-1"></label>
                              <label for="control-2"></label>
                              <label for="control-3"></label>
                              <label for="control-4"></label>
                              <label for="control-5"></label>
                            
                            </div>
                          </ul>
                        </div>
                      </div>
                   <!-- <h2></h2>
                
                
        
                <p class="indent">杨某人正在努力开发中</p>
               
                
                <img class="xiao" src="./图片/01.jpg" alt="">
                <img class="xiao" src="./图片/011.jpg" alt="">
                <img class="xiao" src="./图片/02.jpg" alt="">
                <img class="xiao" src="./图片/03.jpg" alt="">
                <img class="xiao" src="./图片/04.jpg" alt="">
                <img class="xiao" src="./图片/05.jpg" alt="">
                <img class="xiao" src="./图片/06.jpg" alt="">
                <img class="xiao" src="./图片/07.jpg" alt="">
                   -->
            </div>
            </div>
           
        </div>
        <!--娱乐专区-->
        <div class="right">
            <div class="bj">
                <div id="relax">
                    <h2>小小荣誉</h2>
                </div>
                <p>新兵优秀标兵以及嘉奖</p>
                <p>炮兵集训队优秀炮手以及标兵</p>
                <p>师级司号员集训队优秀学员</p>
                <p>执行特殊任务荣获嘉奖</p>
                <p>顺职院红星先锋队国防知识竞赛优秀奖</p>
                <p>顺职院第一届足球超级联赛冠军</p>
            </div>
        </div>
        <div>

        </div>
     
      <div class="left">
        <div class="boxas">
            <div class="sides fronts"></div>
            <div class="sides backs"></div>
            <div class="sides lefts"></div>
            <div class="sides rights"></div>
            <div class="sides tops">
                <div class="tl"></div>
                <div class="tr"></div>
            </div>
            <div class="side bottoms"></div>
            <div class="textaz"><img class="touming" src="https://img.zcool.cn/community/0141775cf8ed64a801213ec277ea10.gif" alt=""></div>
        </div>
        </div>
        <div class="right">
            <div class="bj">
                <h2>大学职位</h2>
                <p>2021.10.1任职副班长（为期一年）</p>
                <p>2022.6.20任职班长联盟负责人（职位因素已不能任职）</p>
                <p>22级新生副主任</p>
                <p>职管乐团铜管声部长</p>
                <p>28-1110宿舍长</p>
            </div>
        </div>
        <div class="left">
            <h4 style="text-align: center;">欢迎大家吐槽、光临</h4>
          
           <h4 style="text-align: center;">联系我们：2254593763@qq.com</h4>
        </div>
    </div>
   

</body>


</html>